<template >
    <div class="mainClass">
        <!--        <h1 style=" position:absolute;top:12%;left: 47%;font-size:40px;">宁波大学ACM集训队</h1>-->
        <el-card class="el-cardCss"><!--style=" position:absolute;left: 30%;"-->
            <el-carousel :interval="3000" indicator-position="outside"  style="width:1000px;position:absolute;left: 8%;background-color:white" height="780px" >
                <el-carousel-item v-for="(img,index) in imgList" :key="index" >
                    <img v-bind:src="img.url">
                </el-carousel-item>
            </el-carousel>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "search",
        data(){
            return{
                imgList:[
                    {url:require('../../src/assets/nbu4.jpg')},
                    {url:require('../../src/assets/nbu2.jpg')},
                    {url:require('../../src/assets/nbu3.jpg')},
                    {url:require('../../src/assets/nbu1.jpg')},

                ]
            }
        },
        methods:{
        }
    }
</script>

<style scoped>
    .mainClass{
        /*background: url('../../src/assets/timg.jpg') right top no-repeat #D5CCBD;*/
        background: #FAF0E6;
        height:100vh;
        margin-top:-38px;/*<!--去空隙-->*/
        margin-left:-50px;/*<!--去空隙-->*/
        margin-right:-15px;/*<!--去空隙-->*/
    }

    .el-carousel__item:nth-child(2n) {
        background-color: white
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: white;
    }
    .el-carousel__indicator .el-carousel__button {
        background: #959595;
        border-radius: 50%;
        height: 14px;
        width: 14px;
    }
    .el-carousel__indicator.is-active .el-carousel__button {
        background: white;
    }
    .el-cardCss{
        width:1200px;
        height:750px;
        position:absolute;/*可以用坐标标记*/
        left: 55%;
        top: 55%;
        background-color: rgba(255,255,255,0.6);
        transform: translate(-50%, -50%);/*放置到正中间*/
    }
</style>
